import React, { FC, useEffect, useState } from 'react'
import { FloatingPanel, ResultPage, Image } from 'antd-mobile'
import { ActionSheet, Button, Cell, Grid, Toast, Card, Popover } from 'react-vant'
import { ShareO, ServiceO, LocationO, Records, QuestionO, TodoListO, VipCardO } from '@react-vant/icons';
import './index.less'
import { useNavigate } from "react-router-dom";
import { getPayData, getVipInfo } from "../../api";
import icon_jinbi from '../../assets/vipImages/icon-jinbi.png'
import icon_shenjuan from '../../assets/vipImages/icon-shenjuan.png'
import icon_fanli from '../../assets/vipImages/icon-fanli.png'
import icon_jisu from '../../assets/vipImages/icon-jisu.png'
import icon_fenxiang from '../../assets/vipImages/icon-fenxiang.png'
import icon_huodong from '../../assets/vipImages/icon-huodong.png'
import icon_shengri from '../../assets/vipImages/icon-shengri.png'
import icon_kefu from '../../assets/vipImages/icon-kefu.png'
import QrcodeDialog from '../../components/QrcodeDialog/Index';
import { useRequest } from 'ahooks';

const My: FC = () => {
    const navigate = useNavigate();
    const anchors = [window.innerHeight * 0.2, window.innerHeight * 0.6, window.innerHeight * 0.9]
    // orderType: count、vip  pullKey: C1 C5  vKey: V1 V2
    const wxPay = async (orderType: string, pullkey?: string, vKey?: string) => {

        let { data } = await getPayData({ orderType, pullkey, vKey }).finally(() => {
            setLoading(false)
        })
        if (data.status == 200) {
            // @ts-ignore
            wx.chooseWXPay({
                timestamp: data.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
                nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: 'RSA', // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
                paySign: data.paySign, // 支付签名
                complete: (res: any) => {
                    if (res.errMsg === 'chooseWXPay:ok') {
                        // 支付成功后的回调函数
                        Toast.success('支付成功')
                        setTimeout(() => {
                            navigate('/')
                        }, 1500);
                    } else {
                        Toast.fail('支付失败')
                    }
                    setLoading(false)
                }
            });
        }
    }

    const openKf = () => {
        window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3MTg0MzU5Mw==#wechat_redirect'
    }

    const [visible, setVisible] = useState<boolean>(false)

    // const vipListActions = [
    //     { name: '5次卡(￥3.8)', subname: '可免费抽取5次' },
    //     { name: '月卡(￥19.8)', subname: '每月推送2条匹配资源 + 5次免费抽取 + CP池查看1个' },
    //     { name: '季卡(￥49.8)', subname: '每月推送4条+超高匹配意向资源' },
    // ]

    const onSelectPay = async (index: number) => {
        console.log(index);
        setLoading(true)

        if (index === 1) {
            await wxPay('count', 'C5')
        } else if (index === 2) {
            await wxPay('count', 'C10')
        } else if (index === 3) {
            await wxPay('vip', '', 'V1')
        } else if (index === 4) {
            await wxPay('vip', '', 'V2')
        }
    }

    const [userInfo, setUserInfo] = useState<any>({})
    const [vipInfo, setVipInfo] = useState<any>({})
    const [loading, setLoading] = useState<boolean>(false)

    const { run } = useRequest(onSelectPay, {
        manual: true,
        throttleWait: 5000
    });

    useEffect(() => {
        getVipInfoHandle()
        sessionStorage.getItem('userInfo') && setUserInfo(JSON.parse(sessionStorage.getItem('userInfo') as string))
    }, [])

    const getVipInfoHandle = async () => {
        let res = await getVipInfo()
        setVipInfo(res.data)
    }

    const [active, setActive] = useState<number>(1)

    const getVipName = (vipLevel: string) => {
        switch (vipLevel) {
            case '1':
                return '普通会员'
            case '2':
                return '高级会员'
            default:
                return '普通用户'
        }
    }

    return (
        <>
            <div className='my'>
                <div className="top">会员中心 </div>
                {/* <!--个人信息--> */}
                <div className="info-card">
                    <div className="user"><Image width={48} height={48} src={userInfo.avatarUrl} />
                        <div className="name">
                            <p>{userInfo.nickName}<i className={
                              vipInfo.vip == '1' ? 'iconfont fs24 text-warning icon-VIP' : vipInfo.vip == '2' ? 'iconfont fs24 text-warning icon-wodeiconvip2' : ''
                            }></i></p>
                            
                            <span>{getVipName(vipInfo.vip)}</span>
                        </div>
                    </div>
                    <div className="info">
                        <div className="item">
                            <p>可用卡次</p><span>{vipInfo.count}</span>
                        </div>
                        <div className="item">
                            <Popover theme="dark" placement='right-start' reference={
                                (
                                    <>
                                        <p className='align-center'>首次特权 <QuestionO className='pl3' /></p>
                                        
                                        {vipInfo.isSubscribe ? <span className='fs12 text-c999'>已使用</span> : <span className='fs12' onClick={() => { setVisible(true) }}>去使用</span>}
                                    </>
                                )
                            }>
                                <p className='fs12 p10'>
                                    新用户首次关注公众号，<br />可免费自动获取一次
                                </p>
                            </Popover>
                        </div>
                        {/* <div className="item">
                            <p>已分享</p><span>{vipInfo.count}</span>
                        </div> */}
                    </div>
                </div>
                {/* <!--会员充值--> */}
                <div className='bgline'>
                    <h5 className="title">会员充值</h5>
                    <div className="hycz">
                        <ul>
                            <li className={active == 1 ? 'active' : ''} onClick={() => { setActive(1) }}>
                                <div className="desc">
                                    <p className="type">5次卡</p>
                                    <p className="money"><span>￥</span>3.8</p>
                                    <div className="remark">
                                        <p>5次抽/取</p>
                                    </div>
                                </div>
                                <div className="limit">限时特价 </div>
                            </li>
                            <li className={active == 2 ? 'active' : ''} onClick={() => { setActive(2) }}>
                                <div className="desc">
                                    <p className="type">10次卡</p>
                                    <p className="money"><span>￥</span>8.8</p>
                                    <div className="remark">
                                        <p>10次抽/取</p>
                                    </div>
                                </div>
                            </li>
                            <li className={active == 3 ? 'active' : ''} onClick={() => { setActive(3) }}>
                                <div className="desc">
                                    <p className="type">普通会员</p>
                                    <p className="money"><span>￥</span>19.8</p>
                                    <div className="remark">
                                        <p>免费抽/取</p>
                                        <p>查看指定账号</p>
                                    </div>
                                </div>
                            </li>
                            <li className={active == 4 ? 'active' : ''} onClick={() => { setActive(4) }}>
                                <div className="desc">
                                    <p className="type">高级会员</p>
                                    <p className="money"><span>￥</span>49.8</p>
                                    <div className="remark">
                                        <p>每月推送资源</p>
                                        <p>专属客服/定制需求</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div className="desc">
                                    <p className="type">超级会员</p>
                                    <p className="money"><span>￥</span>**</p>
                                    <div className="remark">
                                        <p>暂不开放</p>
                                        <p>敬请期待</p>
                                    </div>
                                </div>
                            </li>
                            <div className="holder"></div>
                        </ul>
                        <div className="btn">
                            <Button loading={loading} loadingText='购买中...' onClick={() => { run(active) }}>立即购买</Button>
                            <p>现在升级会员，享受投递的纸条被推荐展示</p>
                        </div>
                    </div>

                    <h5 className="title">会员特权</h5>
                    <div className="hytq">
                        <ul>
                            <li><Image width={40} height={46} src={icon_jinbi} />
                                <p>每日更新</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_shenjuan} />
                                <p>优先推荐</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_fanli} />
                                <p>每周推送</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_jisu} />
                                <p>CP池特权</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_fenxiang} />
                                <p>分享赚</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_huodong} />
                                <p>定制需求</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_shengri} />
                                <p>生日福利</p>
                            </li>
                            <li><Image width={40} height={46} src={icon_kefu} />
                                <p>专属客服</p>
                            </li>
                        </ul>
                    </div>
                    <h5 className="title">个人中心</h5>
                    
                    <Cell.Group card>
                        <Cell title='抽取记录' label="抽/取记录可以在这里查看" icon={
                            <div><i className='iconfont icon-SearchHistory fs34 iconColor'></i></div>
                        } center isLink onClick={() => { navigate('/records') }} />
                        <Cell title='我的客服' label="遇到问题，联系在线客服" icon={
                            <div><i className='iconfont icon-bangzhu fs34 iconColor'></i></div>
                        } center isLink onClick={() => { setVisible(true) }} />
                        <Cell title='帮助&反馈' label="我们非常重视您的问题和建议" icon={
                            <div><i className='iconfont icon-bangzhu1 fs34 iconColor'></i></div>
                        } center isLink onClick={() => { navigate('/feedback') }} />
                        <Cell title='生成分享码' label="生成分享码，免费得会员" icon={
                            <div><i className='iconfont icon-fenxiang fs36 iconColor'></i></div>
                        } center isLink onClick={() => { navigate('/share') }} />
                        <Cell title='代理合作' label="加入我们，更多福利" icon={
                            <div><i className='iconfont icon-hezuoguanxi-xianxing fs34 iconColor'></i></div>
                        } center isLink onClick={() => { setVisible(true) }} />
                    </Cell.Group>
                </div>
            </div>

            <QrcodeDialog title='长按二维码识别' visible={visible} onClose={() => { setVisible(false) }} />

            {/* <FloatingPanel anchors={anchors} className="bgeee">

                <Card style={{ padding: 5 }}>
                    <Grid border={false}>
                        <Grid.Item icon={<ShopO />} text='我的记录' onClick={()=>{navigate('/records')}} />
                        <Grid.Item icon={<Image width={30} height={30} src={icon_fenxiang} />} text='邀请有礼' />
                        <Grid.Item icon={<ShopO />} text='优惠中心' />
                        <Grid.Item icon={<ShopO />} text='我的特权' />
                    </Grid>
                </Card>
                
            </FloatingPanel> */}

        </>
    )
}

export default My;